<template>
	<view>
		<uni-search-bar v-model="searchValue" bgColor="#fff" placeholder="搜索" style="height: 80rpx;margin: 0rpx 20rpx;">
		</uni-search-bar>
		<!-- <uni-grid :column="6" :showBorder="false" :square="false">
			<uni-grid-item v-for="(item, index) in 12" :key="index">
				<view style="margin: 10rpx; display: flex; justify-content: center">
					<button :type="index == current ? 'primary' : 'default'" style="width: 90%;" size="mini"
						@click="changeType(index)">
						{{ index + 1 }}月
					</button>
				</view>
			</uni-grid-item>
		</uni-grid> -->

		<view style="margin: 0rpx 20rpx;">
			<view style="background-color: #fff;margin: 20rpx; padding: 20rpx; border-radius: 5rpx; ">
				<uni-segmented-control :current="typeCurrent" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<text style="font-size: 24rpx; font-weight: bold; margin: 20rpx;">设备保养计划列表</text>
			<view class="content">
				<view v-if="typeCurrent === 0">
					<view v-for="(item,index) in maintenanceData1" :key="index">
						<view
							style="background-color: #fff;margin-bottom: 40rpx;border-radius: 5rpx;padding:10rpx 20rpx;width: 100%;">
							<view style="display:flex;">
								<view style="width: 20%;">
									<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
										style="width: 120rpx;height: 120rpx;margin-top: 15rpx;"></image>
								</view>
								<view style="margin: 30rpx 20rpx;width: 60%;">
									<view style="color: #3E3C50;font-size: 20rpx;">
										{{item.deviceName}}({{item.structureName}})
									</view>
									<view style="color: #A8A8A8;font-size: 16rpx;">{{item.faultDetails}}</view>
									<view style="color: #A8A8A8;font-size: 16rpx;">{{changeTime(item.handleTime)}}
									</view>
								</view>
								<view style="margin-top: 30rpx;width: 20%;">
									<view
										style="background-color: #F3E9DF;color: #E76463;font-size: 18rpx;width: 100%;border-radius: 5rpx;padding:5rpx 20rpx ;">
										{{item.status}}
									</view>
								</view>
							</view>
						</view>

					</view>

				</view>
				<view v-if="typeCurrent === 1">
					<view v-for="(item,index) in maintenanceData1" :key="index">
						<view
							style="background-color: #fff;margin-bottom: 40rpx;border-radius: 5rpx;padding:10rpx 20rpx;width: 100%;">
							<view style="display:flex;">
								<view style="width: 20%;">
									<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
										style="width: 120rpx;height: 120rpx;margin-top: 15rpx;"></image>
								</view>
								<view style="margin: 30rpx 20rpx;width: 60%;">
									<view style="color: #3E3C50;font-size: 20rpx;">
										{{item.deviceName}}({{item.structureName}})
									</view>
									<view style="color: #A8A8A8;font-size: 16rpx;">{{item.faultDetails}}</view>
									<view style="color: #A8A8A8;font-size: 16rpx;">{{changeTime(item.handleTime)}}
									</view>
								</view>
								<view style="margin-top: 30rpx;width: 20%;">
									<view
										style="background-color: #D1E8D6;color: #68A977;font-size: 18rpx;width: 100%;border-radius: 5rpx;padding:5rpx 20rpx ;">
										{{item.status}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		queryProduceRepair
	} from "@/api/index"
	export default {
		data() {
			return {
				form: {},
				current: 0,
				maintenanceData1: [],
				typeCurrent: 0,
				searchValue: null,
				activeColor: '#727e8b',
				styleType: 'button',
				items: [
					'进行中', '已完成'
				],
			}
		},
		onReady() {
			var a = {};
			a.currentIndex = 0
			this.onClickItem(a);
		},
		methods: {
			onClickItem(e) {
				console.log(e)
				this.typeCurrent = e.currentIndex

				this.form.type = '保养';
				if (this.typeCurrent == 0) {
					this.form.status = '正在审批';
				} else {
					this.form.status = '已完成';
				}


				queryProduceRepair(this.form).then(response => {
					console.info('cccccccccccccc', response.rows)
					this.maintenanceData1 = response.rows;
				})
			},
			changeTime(e) {
				console.log(e);
				let date = new Date(e);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，然后使用padStart方法补齐两位
				let day = date.getDate().toString().padStart(2, '0'); // 使用padStart方法补齐两位

				let formattedDate = `${year}-${month}-${day}`;
				console.log(formattedDate); // 输出格式化后的日期
				return formattedDate;
			},
			onNavigationBarButtonTap(e) {
				console.info("aaaaaaaaaaaa", e)
				uni.navigateTo({
					url: '/pages/index/addMaintenance'
				})
			},
		}

	}
</script>

<style>
	.content {
		border-radius: 5px;
		padding: 0rpx 20rpx;
	}
</style>